<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')
    // 固定end

    // 创建图片
    const myImage = new Image()
    myImage.src = 'xiaobao.jpg'
    myImage.onload = function () {
        //获取当前图片的实际宽高
        console.log(myImage.width, myImage.height)
        // 不指定宽高
        // ctx.drawImage(myImage, 0, 0)
        // 指定宽高
        // ctx.drawImage(myImage, 0, 0, 250, 250)
        // 剪切并指定位置宽高
        // ctx.drawImage(myImage, 0, 0, 100, 100, 100, 100, 100, 100)
        // 切头像到指定位置
        ctx.drawImage(myImage, 150, 50, 200, 200, 150, 150, 200, 200)
    }
    myImage.onerror = function (error) {
        console.log('出错了', error)

    }
</script>
</body>
</html>
